<template>
  <nav ref="nav-wrapper">
    <nuxt-link class="nav-item theme-gradient-col-hover"
               v-for="(nav, navIndex) in navs"
               :class="{'theme-select': nav === curPage,
                        'theme-kv': nav !== curPage}"
               :key="navIndex"
               :to="base + linkMap[nav.zh]"

               @mouseenter.native="hoverIndex = navIndex"
               >{{nav.zh}}<span v-if="nav.zh === curPage && !(hoverIndex === navIndex)" class="theme-gradient-row"></span>
      <transition name="fadein-up">
        <ul class="modules" v-show="hoverIndex === navIndex" v-if="nav.modules.length > 1" ref="modules"
            :style="{height: `${nav.modules.length * 56 + 32}px`}"
        >
          <li v-for="(mod, modIndex) in nav.modules" :key="modIndex" class="theme-select-hover"
              :style="{'transition-delay': `${0.13 * modIndex}s`}">{{mod.zh}}</li>
        </ul>
      </transition>

    </nuxt-link>
  </nav>
</template>

<script>
  import {navs} from '../assets/nav';

  export default {
    props: {
      curPage: String,
      navs: Array,
    },
    data() {
      return {
        linkMap: navs,
        base: '/',
        hoverIndex: -1,
      };
    },
    methods: {
      mouseleave() {
        console.log('123');
      }
    },
    mounted() {
      this.$nextTick(()=> {
        this.$refs['nav-wrapper'].addEventListener('mouseleave', () => {
          this.hoverIndex = -1
        })
      })
    },
    created() {
      // 计算路由前缀
      this.base = this.$route.path.slice(0, -(this.linkMap[this.curPage].length));
    }
  };
</script>

<style lang="scss" scoped>
  nav {
    height: 100px;
    .nav-item {
      display: inline-block; font-size: 20px;position: relative;
      height: 100px;
      line-height: 100px;
      width: 180px;
      text-align: center;
      vertical-align: top;

      &:first-child {
        margin-left: 0;
      }

      &.nuxt-link-active > span {
        display: block;
        width: 40px;
        height: 4px;
        position: absolute;
        bottom: 17px;
        left: 50%;
        transform: translateX(-50%);
      }

      .modules {
        background: #fff;
        box-shadow:0 8px 16px 0 rgba(72,78,88,0.2);
        padding: 16px 20px;
        overflow: hidden;
        li {
          height: 56px;
          border-bottom: 1px solid #eee;
          font-size:18px;
          color:rgba(102,102,102,1);
          text-align: center;
          line-height: 56px;
          transition: all .3s linear;
          transition-property: opacity,transform;
          &:last-child {border: none}
        }
      }
    }
    .fadein-up-enter-active, .fadein-up-leave-active {
      transition: all .3s linear;
      /*transform: translateY(0px);*/

    }
    .fadein-up-enter, .fadein-up-leave-to {
      opacity: 0;
      height: 0 !important;
      /*transform: translateY(5px);*/
      li {
        opacity: 0;
        transform: translateY(-5px);
      }
    }
  }
</style>
